<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>舞蹈视频</title>
    <style media="screen">
      * {
        margin: 0;
        padding: 0;
        /*border: 1px solid red;*/
      }
      .wrap {
        width: 100vw;
        height: 100vh;
        position: relative;
        border: 1px solid transparent;
      }
      .title{
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
      .title img {
        width: 100px;
        height: 100px;
        animation: logo_left_ani 5s infinite linear;
        vertical-align: middle;
      }
      @keyframes logo_left_ani {
        0% {transform: rotateY(0deg)}
        50% {transform: rotateY(180deg)}
        100% {transform: rotateY(360deg)}
      }
      #video {
        width: 100%;
        height: 100vw;
        margin-top: 30px;
      }
      .zhiwen{
        width: 100px;
        height: 100px;
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
      .zhiwen img{
        width: 100%;
        height: 100%;
      }
      .content {
        width: 100%;
        text-indent: 2em;
        font-size: 20px;
        margin-top: 20px;
      }
      .left_bottom{
        width: 100%;
        position: absolute;
        bottom: 20px;
        left: 0;
      }
      .left_bottom .left_bottom1{
        font-size: 20px;
        text-indent: 2em;
        padding: 10px 0;
      }
      .left_bottom .left_bottom1 span {
        color: red;
      }
      .left_bottom .left_bottom2{
        font-size: 16px;
        text-align: right;
        margin-right: 120px;
        margin-top: 20px;
      }
      .right_top {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 10px;
        right: 10px;
        background: url(img/xin1.png);
        background-size: 100% 100%;
      }
      .right_top2 {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 10px;
        right: 10px;
        background: url(img/xin2.png);
        background-size: 100% 100%;
      }
      .left_bottom3 {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 10px;
        bottom: 10px;
        font-size: 22px;
        color: red;
        text-decoration: none;
        text-align: center;
        background: url(img/zhuye.png);
        background-size: 100% 100%;
      }
    </style>
    <script src="js/jquery-3.1.0.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="wrap">
      <div class="title" id="title">
        <img src="img/logo_left.png" alt="" />
      </div>
      <div class="right_top" id="right_top">

      </div>
      <video  autoplay controls="controls" id="video">

      </video>
      <div class="content" id="content">

      </div>
      <div class="left_bottom">
        <div class="left_bottom1">
          做一个<span>快乐</span>的人
        </div>
        <div class="left_bottom2">
          扫描指纹，解锁更多快乐
        </div>
      </div>
      <div class="zhiwen" id="zhiwen">
        <img src="img/zhiwen.gif" alt="" />
      </div>
      <a href="phone_two.html" class="left_bottom3"></a>
    </div>
  </body>
  <script type="text/javascript">
    $.ajax({
      url:"http://is.snssdk.com/neihan/stream/mix/v1/?mpic=1&webp=1&essence=1&content_type=-101&message_cursor=-1&am_longitude=116.189866&am_latitude=39.900608&am_city=%E5%8C%97%E4%BA%AC%E5%B8%82&am_loc_time=1476316965307&count=30&min_time=1476449964&screen_width=1080&iid=5779745657&device_id=10634208495&ac=wifi&channel=huawei&aid=7&app_name=joke_essay&version_code=560&version_name=5.6.0&device_platform=android&ssmix=a&device_type=PLK-AL10&device_brand=HONOR&os_api=23&os_version=6.0&uuid=860582030843094&openudid=eb6700f5028cb4da&manifest_version_code=560&resolution=1080*1812&dpi=480&update_version_code=5603",
      dataType:'jsonp',
      success:function(obj) {
        console.log(obj);
        var length = obj.data.data.length;
        console.log(length);
        for (var i = 0 ; i < length ; i++) {
          var type = obj.data.data[i].type;
          if(type == "1"){
            var category_name = obj.data.data[i].group.category_name;
            if (category_name == "舞蹈视频"){
              var mp4_url = obj.data.data[i].group.mp4_url;
              var content = obj.data.data[i].group.content;
              $("#video")[0].src = mp4_url;
              $("#content").html(content);
              console.log(i);
              break;
            }else if(i == length-1){
              window.location.reload();
            }else{
              continue;
            }
          }
        }
      }
    })
    $("#right_top").click(function(){
      $("#right_top").toggleClass("right_top2");
    });
    $("#zhiwen").click(function(){
      window.location.reload();
    });
  </script>
</html>
